<script lang="ts" setup>
import { HomeDeatilType } from "@/typing";
import { toRefs, watch, ref } from "vue";
import { titleTypes } from "@/datas/index";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { homeStoriesStore, audioStoriesStore } from "@/store/index";
import laudIcon from "@/components/icon/LaudIcon.vue";
import ShareIcon from "@/components/icon/ShareIcon.vue";


const router = useRouter()
const store = homeStoriesStore();
const { updateArticle } = store;

const audioStore = audioStoriesStore();
const { isPlay } = storeToRefs(audioStore);

const props = defineProps<{
    listItem: HomeDeatilType,
    category: string
}>()

const { listItem, category } = toRefs(props)
let iconImg = ref('');

function goToRadioView(id: string, category: string, title: string) {
    updateArticle(id, category, title);
    router.push({ name: 'radio' })
}

// 改变全局audioIcon的样式
watch(() => isPlay.value, (newValue) => {
    if (newValue) {
        iconImg.value = require('@/assets/audio/feeds_radio_pause.png');
    }
    else {
        iconImg.value = require('@/assets/audio/feeds_radio_play.png');
    }
})
</script>

<template>
    <div class="p-8">
        <div class="relative" @click="goToRadioView(listItem.item_id, category, listItem.title)">
            <div class="text-center text-gray-400 ">- {{ titleTypes[category] }} -</div>
            <img class="mt-8  rounded-2xl" rounded-t-sm :src="listItem.img_url" alt="img">

            <div class="absolute top-20 left-6 w-52 flex justify-between items-center">
                <img class="w-18 h-5" src="../../assets/card/one_radio_icon.png" alt="one">
                <div class="text-gray-200">{{ listItem.volume }}</div>
            </div>
            <div class=" absolute bottom-6 left-6 text-gray-100 text-3xl mt-8">{{ listItem.title }}</div>
            <img class="absolute bottom-6 right-6 w-14" :src="iconImg || require('@/assets/audio/feeds_radio_play.png')"
                alt="img">
        </div>
        <div class="flex justify-between items-center pt-8 px-3">
            <div class="flex w-40 justify-between  ">
                <img class="rounded-full  w-14 h-14 " :src="listItem.author.web_url" alt="img">
                <div class="text-gray-400 mt-3">{{ listItem.author.user_name }}</div>
            </div>
            <div class="flex justify-between items-center">
                <laudIcon :countNum="listItem.like_count" />
                <div class="ml-14">
                    <ShareIcon :type="0" :shareList="listItem.share_list" />
                </div>
            </div>
        </div>
    </div>
</template>